<!--
 * @Author: ljc
 * @Date: 2024-09-09 14:45:12
 * @LastEditors: g05047
 * @LastEditTime: 2024-11-25 10:51:17
 * @Description: 按钮组编辑数据源弹框
-->
<template>
  <vxe-modal v-bind="dialogOptions"
    v-if="dialogVisible"
    v-model="dialogVisible"
    @close="handleClose">
    <div style="height: 100%;">
      <component :is="componentMap[type].component"
        :fieldOptions="fieldOptions"
        :optionModel="optionModel">
      </component>
    </div>
    <template #footer>
      <el-button size="default"
        type="primary"
        @click="handleClose">取消</el-button>
    </template>
  </vxe-modal>
</template>
  
<script setup name="OperationButtonEditDialog">
import OperationButtonTable from './components/OperationButtonTable.vue'
import OperationRightButtonTable from './components/OperationRightButtonTable.vue'
import { reactive, ref, watch } from 'vue';
import XEUtils from 'xe-utils';
const props = defineProps({
  type: { type: String, default: 'normal' },
  optionModel: Object,
});
const componentMap = {
  normal: { value: 'normal', component: OperationButtonTable },
  right: { value: 'right', component: OperationRightButtonTable },
}
const emits = defineEmits(['close', 'confirm']);
const fieldOptions = ref([])
const dialogOptions = reactive({
  title: props.type === 'right' ? '右侧按钮设置' : '左侧按钮设置',
  width: '80%',
  height: 550,
  resize: true,
  showZoom: false,
  position: { top: 150 },
  showClose: true,
  fullscreen: false,
  showFooter: true,
  destroyOnClose: true,
});
const dialogVisible = ref(false);
const modalClose = () => {
  dialogVisible.value = false
}
const handleOpen = (array, model) => {
  if (props.type === 'right') {
    fieldOptions.value = XEUtils.clone(array, true)
  } else {
    fieldOptions.value = XEUtils.clone(array, true)
  }
  // 显示弹窗
  dialogVisible.value = true
}
const handleClose = () => {
  modalClose()
}
defineExpose({
  handleOpen,
});
  </script>
  <style lang="scss" scoped>
</style>
  